<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue动态绑定</title>
  <style>
    img {
      height: 60px;
    }

    .active {
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <!--  ■错误写法，不能再标签上使用mustache语法，不能够识别-->
  <!--  <img src="{{imgURL}}">-->

  <!--  ■正确做法，使用v-bind指令，来进行值的动态绑定，也就是值的替换-->
  <img v-bind:src="imgURL"/>
  <a v-bind:href="aHref">百度一下</a>
  <!--  ■也可以绑定方法，方法返回一个需要的值-->
  <img v-bind:src="getImgUrl()"/>
  <a v-bind:href="getHref()">百度一下</a>

  <!--  ■v-bind指令语法糖的写法，用 : 替代 v-bind: -->
  <img :src="imgURL"/>
  <a :href="aHref">百度一下</a>

  <!------------------------------------------------------------------------------------------------------------------------------->


  <!--  ■绑定数据可以和原标签属性值共存，vue会解析合并绑定的值和原来的值,假如原标签的属性值只能是一个，比如href这种，要是绑定语法和原语法都存在，则原标签生效-->
  <!--  ■v-bind:class绑定可以绑定对象的形式，{属性1:boolean,属性2:boolean ...}这种形式，我们通过动态绑定这些布尔值，如果布尔值是true的话，说明就会绑定到这个对象的属性名,
          如果是false的话就不会绑定这个对象的属性名
          举例：比如这里，{active: isActive,line: isLine} 假设active的值(isActive)是true，那么class这个标签属性就有active这个值，也就是class=“active”；假设
          active的值和line的值都为true，那么就是class=“active line”；如果其中active的值为true，line的值为false，那么class=“active”
  -->
  <h2 v-bind:class="{active: isActive,line: isLine}">{{message}}</h2>

  <!--  ■将上面这种直接绑定对象的方式，还可以改成绑定方法，方法中返回这个对象即可-->
  <h2 v-bind:class="getClass()">{{message}}</h2>

  <!--  ■还可以写成绑定数组的形式，同样的，也可以像上面绑定方法，方法返回数组-->
  <!--  绑定数据和原来的属性数据可以同时使用,它会将绑定的和原来的进行解析合并,比如这里，就会是class=“title active line”-->
  <h2 class="title" v-bind:class="['active','line']">{{message}}</h2>

  <!--  ■将上面这种直接绑定数组的方式，还可以改成绑定方法，方法中返回这个数组即可-->
  <h2 class="title" v-bind:class="getClass2()">{{message}}</h2>

  <!--  ■监听点击事件-->
  <button v-on:click="btnClick">点击一下</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "vue app",
      imgURL: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590919517&di=f0e49723a8334e9576244d9736cf81a5&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg",
      aHref: "http://www.baidu.com",
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick: function () {
        // 当点按钮时切换isActive的值取反，也就是true和false交替赋值
        // 当该值改变时，也就意味着上面绑定了这个值的h2标签的class属性交替存在去除active这个值
        // 因为上面css已经对class含有active的标签进行设置字体颜色为红色，所以我们在点击按钮时就能够看到h2标签里的内容红色和黑色之间交替变换
        this.isActive = !this.isActive
      },
      getClass: function () {
        return {active: this.isActive, line: this.isLine};
      },
      getClass2:function(){
        return ['active','line']
      },
      getHref: function () {
        return "http://www.baidu.com"
      },
      getImgUrl: function () {
        return "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1590919517&di=f0e49723a8334e9576244d9736cf81a5&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg"
      }
    }
  });
</script>
</body>
</html>